<script setup lang="ts">
import { ref, computed } from 'vue'
import { FormInstance, FormRules } from 'element-plus'
import { cloneDeep } from 'lodash-es'
import { type ApiResponseBo } from '@/api/api-manage/create'
import useDictStore from '@/store/modules/dict'
import { ModalShowType, ModalShowTitle } from '@/types/common'
import { message } from '@/utils/message'

const props = defineProps<{
  formData: ApiResponseBo | null
  modalShow: ModalShowType
}>()
const emit = defineEmits<{
  (e: 'update:modalShow', type: ModalShowType): void
  (e: 'submit', type: ApiResponseBo): void
}>()

const modalShow = computed({
  get() {
    return props.modalShow
  },
  set(value) {
    emit('update:modalShow', value)
  },
})

const dictStore = useDictStore()
const { api_param_type } = dictStore.getDicts('api_param_type')

const formRef = ref<FormInstance>()
const localFormData = ref<ApiResponseBo>({
  paramName: '',
  paramType: '',
  paramDesc: '',
})
const onOpen = () => {
  localFormData.value =
    props.formData === null
      ? {
          paramName: '',
          paramType: '',
          paramDesc: '',
        }
      : props.formData
}

const rules: FormRules = {
  paramName: [{ required: true, message: '必填' }],
  paramType: [{ required: true, message: '必填' }],
  paramDesc: [{ required: true, message: '必填' }],
}

function onSubmit() {
  formRef.value.validate((isValid) => {
    if (!isValid) return
    emit('submit', cloneDeep(localFormData.value))
    formRef.value.resetFields()
    modalShow.value = ModalShowType.Hide
    message('操作成功', { type: 'success' })
  })
}
</script>

<template>
  <el-dialog
    :title="ModalShowTitle.get(modalShow) + '参数'"
    :model-value="modalShow !== ModalShowType.Hide"
    @open="onOpen"
    @close="modalShow = ModalShowType.Hide"
  >
    <el-form ref="formRef" label-width="100px" :model="localFormData" :rules="rules">
      <el-form-item label="参数名称" prop="paramName">
        <el-input
          v-model="localFormData.paramName"
          show-word-limit
          placeholder="请输入参数名称"
          :maxlength="50"
        />
      </el-form-item>
      <el-form-item label="参数类型" prop="paramType">
        <el-select v-model="localFormData.paramType">
          <el-option
            v-for="item in api_param_type"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="参数描述" prop="paramDesc">
        <el-input
          v-model="localFormData.paramDesc"
          show-word-limit
          type="textarea"
          placeholder="请输入参数描述"
          resize="none"
          :rows="5"
          :maxlength="254"
        />
      </el-form-item>
      <el-form-item v-if="modalShow === ModalShowType.New || modalShow === ModalShowType.Edit">
        <el-button type="primary" @click="onSubmit">确认</el-button>
        <el-button @click="modalShow = ModalShowType.Hide">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
